<template>
	<div class="order">
		<el-row justify="space-between">
			<el-col :span="4">
				<span>我的订单详情</span>
			</el-col>
			<el-col :span="13">
				<div class="fon">
					<el-button type="primary" size="mini" @click="getAll()">查看全部</el-button>
					<label :class="{'defaultColo':!flag}">未付款</label>
					<el-switch v-model="flag" active-color="#13ce66" inactive-color="#ff4949" />
					<label :class="{'defaultColo':flag}" style="margin-right: 10px;">已付款</label>
					<el-date-picker v-model="startTime" type="date" placeholder="订单起始时间"></el-date-picker>
					<el-date-picker v-model="endTime" type="date" placeholder="订单结束时间"></el-date-picker>
					<el-button @click="select()">
						<el-icon class="el-icon--right" ><Search /></el-icon>查询
					</el-button>
				</div>
			</el-col>
		</el-row>
		<div class="cart-bottom"></div>
		<el-table :data="orders.slice((this.page-1)*this.num,this.page*this.num)" border style="width: 100% " highlight-current-row>
			<el-table-column prop="ordid" label="订单号" width="120" />
			<el-table-column prop="addr" label="收获地址"  />
			<el-table-column prop="phone" label="电话" width="180" />
			<el-table-column prop="shipno" label="发货单号"  />
			<el-table-column prop="amount" label="总价" />
			<el-table-column  label="是否付款" width="120">
				<template #default="scope">
					<span :class="{'defaultColorTwo':scope.row.ispay==0}">{{filtermoeny(scope.row.ispay)}}</span>
				</template>
			</el-table-column>
			<el-table-column  label="下单时间" width="180">
				<template #default="scope">
					{{filterTime(scope.row.tcreate)}}
				</template>
			</el-table-column>
			<el-table-column  label="操作" fixed='right' width="120">
				<template #default="scope">
					<el-popover placement="left" :width="700" trigger="click">
					    <template #reference>
					      <el-button size="mini" @click="Detailed(scope.row.ordid,scope.row.addr)">明细</el-button>
					    </template>
						<el-row justify="space-between">
							<h4>{{orderid}}&nbsp;&nbsp;#订单详情<b>发往：{{orderaddr}}</b></h4>
						</el-row>
					   <el-table :data="detailedList" border height="280" empty-text="暂无数据">
					      <el-table-column width="150" label="图片" show-overflow-tooltip >
								<template #default="scope">
									<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" />
								</template>
						  </el-table-column>
						  <el-table-column width="260" property="name" label="商品名称" />
						  <el-table-column width="95" property="price" label="商品价钱" />
						  <el-table-column width="94" property="num" label="商品数量" />
						  <el-table-column width="90"  label="小计" >
							  <template #default="scope">
								  {{scope.row.price*scope.row.num}}
							  </template>
						  </el-table-column>
					    </el-table>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<el-row justify="center">
			<el-pagination background layout="prev, pager, next"
			  :total="total"
			  :page-size="num"
			  :hide-on-single-page="true"
			  v-model:currentPage="page">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import { ElMessage } from 'element-plus'
	import {Search} from '@element-plus/icons-vue'
	export default{
		name:'Order',
		data(){
			return{
				orders:[],
				detailedList:[],
				flag:false,//是否付款
				startTime:'',//订单起始时间
				endTime:'',//订单结束时间
				orderaddr:'',//订单地址
				orderid:'',//订单ID
				page:1,//页码
				num:10,//每页显示条数
				total:0,//总页数
				pageflag:true,
			}
		},
		components:{
			Search
		},
		methods: {
			//订单明细
			Detailed(id,addr){
				this.orderid=id;//订单ID
				this.orderaddr=addr;//订单地址
				this.axios.get(`/api/adm/ord/findItemInfoByOrdid/${id}`).then((res)=>{
					let data = res.data.data;
					this.detailedList=data;
				}).catch((erroe)=>{
					console.log(error);
				})
			},
			//条件查询
			select(){
				this.pageflag = false
				this.orders = []
				this.axios.get(`/api/fore/ord/findOrdLineByPage/0/99999`).then((res)=>{
					let data = res.data.data
					if(!this.flag && !this.startTime && !this.endTime){
						for(let temp of data.orders){
							if(temp.ispay==0){
								this.orders.push(temp);
								this.total = this.orders.length;
							}
						}
					}else if(this.flag && !this.startTime && !this.endTime){
						for(let temp of data.orders){
							if(temp.ispay==1){
								this.orders.push(temp);
								this.total = this.orders.length;
							}
						}
					}else if(!this.flag && this.startTime && this.endTime){
						for(let temp of data.orders){
							let start = this.startTime.getTime()
							let end  = this.endTime.getTime()
							if(temp.ispay==0 && temp.tcreate>=start && temp.tcreate<=end){
								this.orders.push(temp);
								this.total = this.orders.length;
							}
						}
					}else if(this.flag && this.startTime && this.endTime){
						for(let temp of data.orders){
							let start = this.startTime.getTime()
							let end  = this.endTime.getTime()
							if(temp.ispay==1 && temp.tcreate>=start && temp.tcreate<=end){
								this.orders.push(temp);
								this.total = this.orders.length;
							}
						}
					}
				})
			},
			TumTime(t){
				return t>9?t:'0'+t
			},
			//查看全部数据
			getAll(){
				this.getOrder()
			},
			// 请求全部数据
			getOrder(){
				this.axios.get(`/api/fore/ord/findOrdLineByPage/0/99999`).then((res)=>{
					let data = res.data.data
					this.total = data.total;
					this.orders=data.orders
				}).catch((error)=>{
					console.log(error);
				})
			}
		},
		computed:{
			//过滤时间
			filterTime(){
				return (t)=>{
					let times = new Date(t)
					 let year = times.getFullYear();
					 let month = times.getMonth()+1;
					 let day = times.getDate()
					return `${year}-${this.TumTime(month)}-${this.TumTime(day)}`
				}
			},
			//过滤是否付款
			filtermoeny(){
				return (v)=>{
					return v==0?'未付款':'已付款'
				}
			}
		},
		created() {
			this.getOrder()
		},
		watch:{
			page(){
				if(this.pageflag){
					this.getOrder()
				}else{
					this.select()
				}
			}
		}
	}
</script>

<style scoped>
	.cart-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	
	.el-col{
		line-height: 60px;
	}
	.el-col span{
		font-weight: bold;
		font-size: 18px;
	}
	.fon{
		width: 100%;
		height: 60px;
	}
	.fon label{
		font-size: 14px;
	}
	.defaultColo{
		color: #3575ff;
	}
	.el-switch{
		margin: 0 10px;
	}
	.defaultColorTwo{
		color: #ff2f20;
	}
	:deep(.el-table__cell img){
		width: 60px;
		height: 40px;
	}
</style>
